<template>
  <section>
    <div class="lineChart">
      <van-nav-bar
        title="健康数据"
        right-text=""
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 100%; height: 250px"></div>
    <div class="line_img">
      <img src="./images/line1.png" style="width: 29%" alt="" />
      <img src="./images/line2.png" style="width: 29%" alt="" />
      <img src="./images/line3.png" style="width: 42%" alt="" />
    </div>
    <div class="line_bottom">
      <h2 class="line_yu">我的预约</h2>
      <table class="line_table">
        <tr class="table_th">
          <th>专家</th>
          <th>科室</th>
          <th>日期</th>
          <th>时间</th>
          <th>状态</th>
        </tr>
        <tr class="table_tr">
          <td class="table_f">王长青</td>
          <td>口腔科</td>
          <td>2021.02.24</td>
          <td>14:00</td>
          <td class="table_b">待就诊</td>
        </tr>
        <tr class="table_tr">
          <td class="table_f">张笑然</td>
          <td>康复科</td>
          <td>2021.02.01</td>
          <td>10:38</td>
          <td class="table_bt">已就诊</td>
        </tr>
        <tr class="table_tr">
          <td class="table_f">张浩</td>
          <td>康复科</td>
          <td>2021.01.08</td>
          <td>09:52</td>
          <td class="table_bt">已就诊</td>
        </tr>
        <tr class="table_tr">
          <td class="table_f">刘兰</td>
          <td>眼科</td>
          <td>2021.01.25</td>
          <td>11:52</td>
          <td class="table_b">待就诊</td>
        </tr>
        <tr class="table_tr">
          <td class="table_f">王铭</td>
          <td>骨科</td>
          <td>2021.01.13</td>
          <td>18:52</td>
          <td class="table_bt">已就诊</td>
        </tr>
      </table>
    </div>
  </section>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      opinionData: ["60", "70", "75", "70", "60", "75", "70"],
    };
  },
  methods: {
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["心率"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        },
        yAxis: {
          type: "category",
          boundaryGap: false,
          data: ["55", "60", "70", "75", "80", "90", "100"],
        },

        series: [
          {
            name: "心率",
            type: "line",
            stack: "总量",
            data: this.opinionData,
          },
        ],
      });
    },
    onClickLeft() {
      this.$router.replace("/profile");
    },
  },
  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main");
    });
  },
};
</script>
<style scoped>
.line_back {
  position: absolute;
  left: 5px;
  width: 15px;
  height: 15px;
}
.lineChart {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
}
.line_img {
  margin-top: 10px;
}
.line_bottom {
  margin-top: 10px;
  background-color: #fff;
}
.line_yu {
  font-weight: 700;
}
.line_table {
  width: 100%;
  border-collapse: collapse;
  margin: 4% auto 0;
  text-align: center;
}
.table_th {
  font-size: 16px;
  color: slategrey;
  width: 90%;
  height: 35px;
  line-height: 35px;
}
.table_tr {
  margin: 5px 0;
  font-size: 14px;
  color: slategrey;
  width: 90%;
  height: 35px;
  line-height: 35px;
}
.table_f {
  font-weight: 700;
  color: black;
  font-size: 14px;
}
.table_b {
  background-color: #ff00005c;
  border-radius: 20px;
}
.table_bt {
  background-color: #69e5566e;
  border-radius: 20px;
}
</style>
